<template>
  <div>
    <div class="computer" v-for="(item, index) in list" :key="index" @dblclick="iconDispaly(item.title)">
      <img :src="item.imgPath" :alt="item.title" :title="item.title" />
      <span>{{ item.title }}</span>
    </div>
  </div>
</template>

<script>
import bus from "../assets/js/eventBus";

export default {
  name: "icon",
  props: {
    list: {
      type: Array,
      require: true,
    }
  },
  components: {},
  data() {
    return {
      // imgPtah: ''
    };
  },
  methods: {
    iconDispaly(title) {
      let msg = {
        title,
        display: true,
        isActive: true,
      };
      bus.$emit("displayChang", msg);
      bus.$emit("taskbarList", title);
    },
  },
  mounted() {

  },
};
</script>

<style scoped>
.computer {
  margin-left: 10px;
  width: 76px;
  height: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  user-select: none;
  text-align: center;
  margin-bottom: 20px;
}

.computer span {
  color: rgb(1, 19, 8);
  font-size: 14px;
  margin-top: 5px;
}

.computer img {
  width: 38px;
}

.computer:hover {
  border: 1px solid #fff;
}
</style>
